<template>
    <div class="addProduct">
        <div class="topNav">
            <el-divider class="topLine"><i class="lineIcon el-icon-document-copy"></i><span
                    class="lineTitle" id="optionProduct">新建产品表</span></el-divider>
        </div>
        <div class="productSetNav">
        </div>
        <div class="addContent">
            <!--开启表单验证：:rules="rules" ref="moudle" 表单右侧验证符号 status-icon -->
            <el-form :model="product" status-icon :rules="rules" label-width="100px" ref="product"
                     :label-position="labelPosition">

                <!--<el-form-item label="关联moduleId" prop="moduleId">
                    <el-input id="moduleId" class="inputLine" v-model="product.moduleId"></el-input>
                </el-form-item>-->
                <el-form-item label="产品标题" prop="name">
                    <el-input id="name" class="inputLine" v-model="product.name"></el-input>
                </el-form-item>

                <el-form-item label="seo标题" prop="seoTitle">
                    <el-input id="seoTitle" class="inputLine" v-model="product.seoTitle"></el-input>
                </el-form-item>

                <el-form-item label="SEO关键字" prop="seoKeyword">
                    <el-tag class="keyTags" id="seoKeyword"
                            :key="tag"
                            v-for="tag in seoKeyword"
                            closable
                            :disable-transitions="false"
                            @close="handleClose(tag)">
                        {{tag}}
                    </el-tag>
                    <el-input
                            class="input-new-tag"
                            v-if="inputVisible"
                            v-model="seoKey"
                            ref="saveKeyInput"
                            size="small"
                            @keyup.enter.native="handleInputConfirm"
                            @blur="handleInputConfirm"
                    >
                    </el-input>
                    <el-button v-else class="keyTagsInput button-new-tag" size="small" @click="showInput">+ SEO关键字
                    </el-button>
                </el-form-item>

                <el-form-item label="seo描述" prop="seoDescription">
                    <el-input id="seoDescription" class="inputLine" type="textarea" :rows="2" v-model="product.seoDescription"></el-input>
                </el-form-item>

                <el-form-item label="产品图片" prop="picList">
                    <big-file :upload-tile="'上传图片'" :input-id="'upload-product-icon'"
                              :suffix-type="['jpg','jpeg','png','gif']"
                              :uniId="product.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_PUBLIC.key"
                              :after-upload="afterUpload"></big-file>
                </el-form-item>

                <el-row class="upload-file-list" v-if="files.length>0">
                    <el-col :span="20">
                        <div class="file-image" v-for="file in files" :key="file.index">
                            <el-image class="img-url"
                                      :src="file"
                                      :preview-src-list="files"
                            >
                            </el-image>
                            <div class="img-after">
                                <!--<span class="glyphicon glyphicon-trash"></span>
                                <p>刪除</p>-->
                                <el-button class="img-del" type="danger" icon="glyphicon glyphicon-trash"
                                           @click="removeImg(file)"></el-button>
                            </div>

                        </div>
                    </el-col>
                </el-row>

                <el-form-item label="产品视频" prop="productVideo">
                    <big-file :upload-tile="'上传产品视频'" :input-id="'upload-productVideo-icon'" :suffix-type="['mp4']"
                              :uniId="product.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_PUBLIC.key"
                              :after-upload="afterProductVideoUpload"></big-file>
                    <el-row class="upload-icon">
                        <el-col :span="14">
                            <OSSPlayer player-id="av" ref="ossPlayer" class="productVideo"></OSSPlayer>
                        </el-col>
                    </el-row>
                </el-form-item>

                <!--<el-form-item label="VOD" prop="productVod">
                    <vod-file :upload-tile="'上传VOD视频'" :input-id="'upload-vod-icon'" :suffix-type="['mp4']"
                              :uniId="product.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_ACTIVE.key"
                              :after-upload="afterVodUpload" :url="'vod-simple'"></vod-file>
                    <el-row class="upload-icon">
                        <el-col :span="12">
                            <OSSPlayer player-id="vod-player" ref="ossPlayer"></OSSPlayer>
                            <video id="vod" class="articleVideo hidden" :src="product.productVod" controls="controls"></video>
                        </el-col>
                    </el-row>
                </el-form-item>-->

                <el-form-item label="轮播图封面" prop="videoCover">
                    <big-file :upload-tile="'上传封面图片'" :input-id="'upload-videoCover-icon'"
                              :suffix-type="['jpg','jpeg','png','gif']"
                              :uniId="product.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_PUBLIC.key"
                              :after-upload="afterVideoCoverUpload"></big-file>
                    <el-row class="upload-icon">
                        <el-col :span="14" v-if="product.videoCover">
                            <img :src="product.videoCover" class="img-responsive"/>
                        </el-col>
                    </el-row>
                </el-form-item>

                <!--<el-form-item label="视频标题" prop="videoTitle">
                    <el-input id="videoTitle" class="inputLine" v-model="product.videoTitle"></el-input>
                </el-form-item>
                <el-form-item label="视频介绍" prop="videoDesc">
                    <el-input id="videoDesc" class="inputLine" v-model="product.videoDesc"></el-input>
                </el-form-item>-->

                <!--<el-form-item label="时长" prop="videoTime">
                    <el-input id="videoTime" class="inputLine" v-model="product.videoTime" disabled></el-input>
                </el-form-item>-->

                <el-form-item label="产品内容" prop="productContent">
                    <el-input id="content" v-model="product.productContent"></el-input>
                </el-form-item>

                <!--<el-form-item label="收费" prop="videoCharge">
                    <el-select id="videoCharge" class="inputLine" v-model="product.videoCharge" placeholder="请选择">
                        <el-option
                                v-for="item in charge"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key"
                                :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>-->

                <el-form-item label="视频分类" prop="videoType">
                    <el-select id="videoType" class="inputLine" v-model="product.videoType" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key"
                                :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="产品类型" prop="typeId">
                    <el-select id="typeId" class="inputLine" v-model="product.typeId" placeholder="请选择">
                        <el-option
                                v-for="item in PRODUCT_TYPE"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key"
                                :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="微信跳转路径" prop="path">
                    <el-input id="path" class="inputLine" v-model="product.path"></el-input>
                </el-form-item>

                <el-form-item label="原价" prop="price">
                    <el-input-number v-model="product.price" id="price" class="inputLine"
                                     :precision="2" :step="0.1" controls-position="right" @change="handleChange"
                                     :min="0.1"></el-input-number>
                </el-form-item>
                <el-form-item label="会员价" prop="memberPrice">
                    <el-input-number v-model="product.memberPrice" id="memberPrice" class="inputLine"
                                     :precision="2" :step="0.1" controls-position="right" @change="handleChange"
                                     :min="1"></el-input-number>
                </el-form-item>

                <el-form-item label="首页显示" prop="indexShow">
                    <el-radio-group class="indexShow" v-model="product.indexShow" @change="indexShowChange">
                        <el-radio-button :label="INDEX_SHOW.SHOW.value"></el-radio-button>
                        <el-radio-button :label="INDEX_SHOW.UNSHOW.value"></el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="产品权限描述" prop="privilegeDescDto">
                    <el-input class="privilegeInput" placeholder="请输入内容" maxlength="7" show-word-limit
                              v-model="privilegeDescDto.title">
                        <template class="privilegeInputTitle" slot="prepend">权限标题</template>
                    </el-input>
                    <el-input class="privilegeInput" placeholder="请输入内容" maxlength="7" show-word-limit
                              v-model="privilegeDescDto.desc">
                        <template class="privilegeInputTitle" slot="prepend">权限描述</template>
                    </el-input>
                    <el-input class="privilegeInput" placeholder="请输入内容" maxlength="7" show-word-limit
                              v-model="privilegeDescDto.tag">
                        <template class="privilegeInputTitle" slot="prepend">特惠标签</template>
                    </el-input>
                    <el-button class="privilegeBtn" icon="el-icon-plus" type="primary" @click="addPrivilegeDesc">添加</el-button>
                </el-form-item>

                <el-row>
                    <el-table v-if="privilegeDescList.length>0"
                              :data="privilegeDescList"
                              style="width: 100%"
                              max-height="250"
                              class="previous-row"
                              ref="multipleTable">
                        <el-table-column class="coreIconItem"
                                         fixed
                                         prop="title"
                                         label="权限标题"
                                         :show-overflow-tooltip="true">

                        </el-table-column>
                        <el-table-column
                                fixed
                                prop="desc"
                                label="权限描述"
                                :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column
                                fixed
                                prop="tag"
                                label="促销标签"
                                :show-overflow-tooltip="true">
                        </el-table-column>

                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="200">
                            <template slot-scope="scope">
                                <el-button class="editCore"
                                           @click="editPrivilegeDesc(scope.row)"
                                           type="primary"
                                >
                                    编辑
                                </el-button>
                                <el-button class="delCore"
                                           @click="delPrivilegeDesc(scope.row)"
                                           type="danger"
                                >
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>

                <el-form-item label="显示1 " prop="isShow">
                    <el-switch id="isShow" class="inputLine"
                               v-model="product.isShow"
                               active-color="#13ce66"
                               inactive-color="#ff4949"
                               :active-value="1"
                               :inactive-value="0"
                    >
                    </el-switch>
                </el-form-item>
                <!--<el-form-item label="点击量" prop="clickNum">
                    <el-input id="clickNum" class="inputLine" v-model="product.clickNum"></el-input>
                </el-form-item>-->

                <el-form-item label="排序" prop="sort">
                    <el-input id="sort" class="inputLine" v-model="product.sort"></el-input>
                </el-form-item>

                <el-form-item label="级别" prop="level">
                    <el-select id="level" class="inputLine" v-model="product.level" placeholder="请选择">
                        <el-option
                                v-for="item in level"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key"
                                :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="状态" prop="status">
                    <el-select id="status" class="inputLine" v-model="product.status" placeholder="请选择">
                        <el-option
                                v-for="item in status"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key"
                                :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!--<el-form-item label="预购" prop="enrollBuy">
                    <el-input id="enrollBuy" class="inputLine" v-model="product.enrollBuy"></el-input>
                </el-form-item>-->
                <el-form-item>
                    <!--这里save(formName)方法保存，ref别名的product-->
                    <el-button id="submitBtn" type="primary" @click="save('product')">立即创建</el-button>
                    <el-button @click="resetForm('product')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="editPrivilege">
            <el-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false" class="dialogDef">
                <div slot="title" class="header-title">
                    <div style="padding:15px 20px;">{{this.dialogTitle}}</div>
                </div>
                <!--绑定校验规则，必须这里:model绑定模块，ref做别名，:rules指定规则-->
                <el-form v-model="privilegeDescDto" :model="privilegeDescDto" ref="privilegeDescDto" :rules="rules" status-icon>

                    <el-form-item :label="labelName" :label-width="formLabelWidth" prop="title">
                        <el-input class="inputWidth" v-model="privilegeDescDto.title"></el-input>
                    </el-form-item>
                    <el-form-item :label="labelContent" :label-width="formLabelWidth" prop="desc">
                        <el-input class="inputWidth" v-model="privilegeDescDto.desc"></el-input>
                    </el-form-item>
                    <el-form-item :label="labelLargeContent" :label-width="formLabelWidth" prop="tag">
                        <el-input class="inputWidth" v-model="privilegeDescDto.tag"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveCore(privilegeDescDto)">保 存</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import BigFile from "../../../components/BigFile";
    import OSSPlayer from "../../../components/OSSPlayer";

    export default {
        name: "AddProduct",
        components: {BigFile, OSSPlayer},
        props: {
            list: {
                type: Function,
                default: null
            },
        },
        data() {
            let nameValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("产品标题不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("产品标题长度至少3位"));
                } else {
                    callback();
                }
            }
            let seoTitleValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("seo标题不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("seo标题长度至少3位"));
                } else {
                    callback();
                }
            }
            let seoDescriptionValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("seo描述不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("seo描述长度至少3位"));
                } else {
                    callback();
                }
            }
            let productVideoValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("产品视频不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("产品视频长度至少3位"));
                } else {
                    callback();
                }
            }
            let videoCoverValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("视频封面不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("视频封面长度至少3位"));
                } else {
                    callback();
                }
            }
            let videoTitleValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("视频标题不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("视频标题长度至少3位"));
                } else {
                    callback();
                }
            }
            let videoDescValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("视频介绍不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("视频介绍长度至少3位"));
                } else {
                    callback();
                }
            }
            let pathValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("产品路径不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("产品路径长度至少3位"));
                } else {
                    callback();
                }
            }

            return {
                message: '这里是更新产品表页面',
                product: {},
                labelPosition: 'left',

                rules: {
                    name: [
                        {validator: nameValidate, trigger: 'blur'}
                    ],
                    seoTitle: [
                        {validator: seoTitleValidate, trigger: 'blur'}
                    ],

                    seoDescription: [
                        {validator: seoDescriptionValidate, trigger: 'blur'}
                    ],
                    /*productVideo: [
                        {validator: productVideoValidate, trigger: 'blur'}
                    ],
                    videoCover: [
                        {validator: videoCoverValidate, trigger: 'blur'}
                    ],
                    videoTitle: [
                        {validator: videoTitleValidate, trigger: 'blur'}
                    ],
                    videoDesc: [
                        {validator: videoDescValidate, trigger: 'blur'}
                    ],
                    path: [
                        {validator: pathValidate, trigger: 'blur'}
                    ],*/
                },
                /*seo关键字*/
                inputVisible: false,
                seoKey: '',
                seoKeyword: [],

                options: VIDEO_TYPE,
                charge: VIDEO_CHARGE,
                isShow: YES_OR_NO,
                level: LEVEL,
                status: STATUS,
                PRODUCT_TYPE: PRODUCT_TYPE,
                //级联选择
                value: [],
                //文件上传
                SOURCE_USE_TYPE: SOURCE_USE_TYPE,
                //文件列表
                files: [],
                //产品显示
                INDEX_SHOW: INDEX_SHOW,
                //产品权限描述
                privilegeDescList: [],
                privilegeDescDto: {},
                descDto:{},
                dialogFormVisible: false,
                dialogTitle: '',
                labelName: '',
                disabled: 'disabled',
                labelContent: '',
                labelLargeContent: '',
                formLabelWidth: '120px',
            }
        },
        mounted() {
            let moduleParentId = SessionStorage.get(PRODUCT_MODULE_PARENTID) || "";
            if (this.$route.params.product != null) {
                this.product = this.$route.params.product;
                //赋值seoKey
                if (!Tool.isEmpty(this.product.seoKeyword.toString())) {
                    this.seoKeyword = this.product.seoKeyword;
                } else {
                    this.seoKeyword = [];
                }
                this.product.moduleUniId = moduleParentId;

                if (!Tool.isEmpty(this.product.picList.toString())) {
                    this.files = this.product.picList;
                } else {
                    this.files = [];
                }
                //初始化：视频播放
                if (!Tool.isEmpty(this.product.productVideo)) {
                    this.$refs.ossPlayer.playURL(this.product.productVideo, this.product.videoCover);
                }
                //首页显示回显
                if (this.product.indexShow === "ON") {
                    this.product.indexShow = INDEX_SHOW.SHOW.value;
                } else {
                    this.product.indexShow = INDEX_SHOW.UNSHOW.value;
                }
                //产品权限描述
                if(!Tool.isEmpty(this.product.productPrivilegeDescDtos)){
                    this.privilegeDescList=this.product.productPrivilegeDescDtos;
                }
                let optionProduct = document.getElementById("optionProduct");
                let submitBtn = document.getElementById("submitBtn");
                optionProduct.innerHTML = '更新产品数据';
                submitBtn.innerHTML = "立即更新";
            } else {
                //获取article在session中保存的articleModuleId
                let moduleId = SessionStorage.get(PRODUCT_MODULE_ID) || "";
                if (moduleId !== null) {
                    this.product = {};
                    this.product.moduleId = moduleId;
                    this.product.moduleUniId = moduleParentId;
                    this.product.indexShow = INDEX_SHOW.UNSHOW.value;
                }
            }
            //富文本
            //获取文件分片大小
            function getShardFile(shardIndex, shardSize, files) {
                let _this = this;
                let file = files;
                let start = (shardIndex - 1) * shardSize; //分片起始大小
                let end = Math.min(file.size, start + shardSize);
                //从start→end截取当前的分片数据
                let shardFile = file.slice(start, end);
                return shardFile;
            }

            function upload(param, file) {
                let shardTotal = param.shardTotal;
                let shardIndex = param.shardIndex;
                let shardSize = param.shardSize;
                let files = file;
                let shardFile = getShardFile(shardIndex, shardSize, files);
                let token = Tool.getEmpLogin().token;
                let fileReader = new FileReader();
                Progress.show(parseInt((shardIndex - 1) * 100 / shardTotal));
                //先加载fileReader，读取到e，再进行数据shardFile转换
                fileReader.onload = function (e) {
                    let base64 = e.target.result;
                    param.shard = base64;
                    $.ajax({
                        url: 'http://127.0.0.1:8899/source/admin/oss/append',//后台文件上传接口
                        type: 'POST',
                        data: JSON.stringify(param), //转json上传fileDto对象
                        dataType: "json",
                        headers: {
                            'token': token, //加入请求头token校验
                        },
                        processData: false,
                        contentType: "application/json;charset=UTF-8",
                        success: function (data) {
                            let resp = data.data;
                            Progress.show(parseInt(shardIndex * 100 / shardTotal));
                            //判断分片的shardIndex和shardTotal值，是否分片上传完毕
                            if (shardIndex < shardTotal) {
                                param.shardIndex = param.shardIndex + 1;
                                upload(param);
                            } else {
                                Progress.hide();
                                $('#content').summernote('insertImage', data.responseData.path, 'img');
                            }
                        }
                    });
                }
                //需要放在fileReader之后，生成shardFile
                fileReader.readAsDataURL(shardFile);
            }

            //1.初始化富文本
            $("#content").summernote({
                lang: 'zh-CN',
                focus: true,
                height: 300,
                //自定义工具栏
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'clear', 'strikethrough', 'superscript', 'subscript']],
                    ['fontname', ['fontname']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph', 'fontsize', 'height', 'hr']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],//插入集合
                    ['view', ['codeview', 'help']]
                ],
                callbacks: {
                    //这里原生js暴露的方法名必须相同
                    onImageUpload: function (files) {
                        let _this = this;
                        let file = files[0];
                        let formData = new FormData();
                        formData.append('file', file);
                        let token = Tool.getEmpLogin().token;

                        /*************************************************************/
                        let shardKey16 = hex_md5(file.name + file.size + file.type); //md5:16进制处理file
                        let shardKey10 = parseInt(shardKey16, 16);//转换为10进制
                        //62进制(短key)：26个大写字母+26个小写字母+10个阿拉伯数字
                        let shardKey62 = Tool.md_10to64(shardKey10);

                        //file类型判断["jpg","jpeg","png","gif"]
                        let suffixType = ["jpg", "jpeg", "png", "gif"];
                        let fileName = file.name;
                        let suffix = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();
                        let validateSuffix = false;
                        //循环后缀类型
                        for (let i = 0; i < suffixType.length; i++) {
                            if (suffixType[i].toLowerCase() === suffix) {
                                validateSuffix = true;
                                break;
                            }
                        }
                        if (!validateSuffix) {
                            toast.warning("文件格式不正确，只支持上传：" + suffixType.join(",") + "文件");
                            return;
                        }

                        //文件分片shard
                        let shardSize = 1024 * 1024; //每1MB为一个分片，
                        let startIndex = 1; //分片起始索引，1为第一个分片
                        let size = file.size;//文件大小
                        let shardTotal = Math.ceil(size / shardSize);//分片总数，向上取整1.1=2
                        let contentType = file.type;
                        /**
                         * 统一请求参数，使用formData传递，需要将file中的shardFile转为base64的字符串string
                         * fileReader加载时，接收参数e,转为base64 = e.target.result
                         * base64字符串：文件说明+","+base64码(文件内容)
                         * 在fileReader包裹后，需要_this=this;
                         */
                        let param = {
                            'size': size,
                            'shardIndex': startIndex,
                            'shardSize': shardSize,
                            'shardTotal': shardTotal,
                            'name': file.name,
                            'suffix': suffix,
                            'shardKey': shardKey62,
                            'contentType': contentType,
                            'moduleId': '',
                            'useType': 'T',
                        };
                        $.ajax({
                            url: 'http://127.0.0.1:8899/source/admin/check/file/' + param.shardKey,//后台文件上传接口
                            type: 'GET',
                            headers: {
                                'token': token,
                            },
                            success: function (data) {
                                let fileDto = data.responseData;
                                if (!fileDto) {
                                    param.shardIndex = 1;
                                    upload(param, file);

                                } else if (fileDto.shardIndex === fileDto.shardTotal) {
                                    toast.success("文件急速秒传成功！");
                                    $('#content').summernote('insertImage', data.responseData.path, 'img');
                                } else {
                                    param.shardIndex = fileDto.shardIndex + 1;
                                    upload(param, file);
                                }
                            }
                        });
                    },

                }
            })
            //2.获取当前module的富文本内容
            $("#content").summernote('code', this.product.productContent);
        },
        methods: {

            //1.新增产品表
            save(formName) {
                let _this = this;
                let responseMsg = '';
                this.product.seoKeyword = this.seoKeyword;
                this.product.picList = this.files;
                let content = $("#content").summernote('code');
                this.product.productContent = content;
                this.product.productPrivilegeDescDtos=this.privilegeDescList;
                if (this.product.indexShow.indexOf("首页") !== -1) {
                    this.product.indexShow = INDEX_SHOW.SHOW.key;
                } else {
                    this.product.indexShow = INDEX_SHOW.UNSHOW.key;
                }
                this.getFiles();
                //前端校验
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/product/save', this.product)
                            .then((response) => {
                                let resp = response.data;
                                responseMsg = response;

                                if (resp.success) {
                                    this.$router.push("/business/product/set");
                                    //引入全局变量toast提示
                                    toast.success("保存成功", "bottom-end");
                                } else {
                                    this.$notify({
                                        title: '填写内容错误',
                                        message: resp.responseMsg,
                                        position: "top-right",
                                        type: 'warning'
                                    });
                                }
                            })
                    } else {
                        this.$notify({
                            title: '填写内容错误',
                            message: '请按照提示内容填写正确信息',
                            position: "top-right",
                            type: 'warning'
                        });
                        return false;
                    }
                });

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //SEO标签
            handleClose(tag) {
                this.seoKeyword.splice(this.seoKeyword.indexOf(tag), 1);
            },
            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveKeyInput.$refs.input.focus();
                });
            },
            handleInputConfirm() {
                let seoKey = this.seoKey;
                if (seoKey) {
                    this.seoKeyword.push(seoKey);
                }
                this.inputVisible = false;
                this.seoKey = '';
            },
            //级联选择器
            handleChange(value) {
                console.log(value);
            },
            //接收文件上传组件传入的resp
            afterUpload(resp) {
                if (resp.success) {
                    let moduleId = this.product.uniId;
                    let picPath = resp.responseData.path;
                    if (!Tool.isEmpty(moduleId)) {
                        this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/product/savePicList',
                            {
                                moduleId: moduleId,
                                picPath: picPath
                            })
                            .then((response) => {
                                let resp = response.data;
                                if (resp.success) {
                                    let pics = [];
                                    for (let i = 0; i < resp.responseData.length; i++) {
                                        pics.push(resp.responseData[i]);
                                    }
                                    this.files = pics;
                                    toast.success("保存成功", "bottom-end");
                                } else {
                                    this.$notify({
                                        title: '保存失败，请联系管理员',
                                        message: resp.responseMsg,
                                        position: "top-right",
                                        type: 'warning'
                                    });
                                }
                            })
                    } else {
                        this.files.push(picPath);
                    }
                }
            },
            afterProductVideoUpload(resp) {
                this.product.productVideo = resp.responseData.path;
                this.getVideoTime();
                this.$refs.ossPlayer.playURL(resp.responseData.path);
            },
            afterVideoCoverUpload(resp) {
                this.product.videoCover = resp.responseData.path;
            },
            afterVodUpload(resp) {
                this.product.productVod = resp.responseData.vod;
                this.getVodTime();
                //调取播放器
                this.$refs.ossPlayer.playURL(resp.responseData.path);
            },
            //获取视频时间
            getVideoTime() {
                let _this = this;
                //增加延时，避免获取不到视频时长
                setTimeout(function () {
                    let video = document.getElementById("av");
                    _this.product.videoTime = parseInt(video.duration, 10);
                }, 1000);
            },
            //获取VOD时长，这里做测试普通视频/加密视频时长
            getVodTime() {
                let _this = this;
                setTimeout(function () {
                    let video = document.getElementById("vod");
                    _this.product.videoTime = parseInt(video.duration, 10);
                }, 1000);
            },
            getFiles() {
                this.$axios.get(process.env.VUE_APP_SERVER + '/source/admin/file/list/' + this.product.uniId)
                    .then((response) => {
                        let resp = response.data;
                        if (resp.success) {
                            this.files = resp.responseData;
                            this.savePicList(this.files);
                            SessionStorage.set(FILE_LIST, this.files);
                        }
                    });
            },
            //存入picList
            savePicList(files) {
                let pics = [];
                for (let i = 0; i < files.length; i++) {
                    pics.push(files[i].path);
                    this.product.picList = JSON.stringify(pics);
                }
            },
            removeImg(file) {
                let boxMessage = document.querySelectorAll(".el-message-box .el-message-box__content .el-message-box__container .el-message-box__message p");
                for (let i = 0; i < boxMessage.length; i++) {
                    boxMessage[i].style = "word-wrap:break-word";
                }
                this.$confirm('确认删除 【' + file + '】文件？', '删除图片操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.files.splice(this.files.indexOf(file), 1);
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                });

            },
            //首页显示选项
            indexShowChange() {
                console.log("当前选择product.indexShow：", this.product.indexShow);

            },

            //添加
            addPrivilegeDesc(){
                this.privilegeDescList.push(this.privilegeDescDto);
                this.privilegeDescDto={};
            },
            //编辑privilegeDto
            editPrivilegeDesc(item) {
                if(Tool.isEmpty(this.product.productPrivilegeDescDtos)) {
                    const h = this.$createElement;
                    this.$notify.error({
                        title: '请先保存产品',
                        message: h('i', {style: 'color: teal'}, '请先保存产品，避免数据丢失'),
                        position: 'bottom-right'
                    });
                }else{
                    this.dialogFormVisible = true;
                    this.privilegeDescDto = $.extend({}, item);
                    let privilegeOri=item;
                    this.descDto=privilegeOri;
                    this.dialogTitle = "编辑产品权限描述";
                    this.labelName = "权限标题";
                    this.labelContent = "权限内容";
                    this.labelLargeContent = "促销标签";
                }
            },
            saveCore(privilegeDescDto) {
                for(let i=0;i<this.privilegeDescList.length;i++){
                    if(this.privilegeDescList[i]===this.descDto){
                        this.privilegeDescList[i]=privilegeDescDto;
                        //需要刷新save请求
                    }
                }
                this.product.seoKeyword = this.seoKeyword;
                this.product.productPrivilegeDescDtos=this.privilegeDescList;
                this.product.picList = this.files;

                this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/product/save', this.product)
                    .then((response) => {
                        let resp = response.data;
                        if (resp.success) {
                            this.files=resp.responseData.picList;
                            this.privilegeDescList=resp.responseData.productPrivilegeDescDtos;
                            toast.success("保存成功", "bottom-end");
                        } else {
                            this.$notify({
                                title: '保存失败，请联系管理员',
                                message: resp.responseMsg,
                                position: "top-right",
                                type: 'warning'
                            });
                        }
                    })

                this.dialogFormVisible = false;
                this.privilegeDescDto = {};

            },
            delPrivilegeDesc(item) {
                this.privilegeDescList.splice(this.privilegeDescList.indexOf(item,1));
            },
        },
    }
</script>

<style scoped>
    /*顶部line样式*/
    .topNav {

    }

    /deep/ .el-divider__text {
        background-color: #1d7dd6;
        padding: 8px 20px;
    }

    .topLine {
        background-color: #1d7dd6;
    }

    .lineIcon {
        font-size: 22px;
        color: #ffffff;
        position: relative;
        margin-right: 5px;
    }

    .lineTitle {
        position: relative;
        font-size: 16px;
        color: #ffffff;
    }

    /*产品表设置导航*/
    .productSetNav {
        max-width: 400px;
        margin: 5px auto;

    }

    .productSetNavTile {
        cursor: pointer;
    }

    /*内容区位置*/
    .addContent {
        margin-left: 5%;
        margin-top: 35px;
        margin-right: 5%;
    }

    /deep/ .el-form-item {
        margin-bottom: 5px;
    }

    /*输入行控制*/
    .inputLine {
        max-width: 350px;
        float: left;
    }

    /*关键字标签*/
    .el-tag + .el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }

    .titleLeft {
        float: left;
    }

    /*SEO描述*/
    .textAreaWidth {
        max-width: 400px;
        float: left;
    }

    /*图片上传：取消upload打开的input默认按钮*/
    /deep/ input[type=file] {
        display: block;
        margin-left: -800px;
    }

    .upload-icon {
        margin-top: -50px;
        margin-bottom: 10px;
    }

    .upload-icon img {
        padding: 5px;
        border: 1px solid #cccccc;
    }


    /*错误提示*/
    #productTitle {
        float: left;
    }

    /deep/ .el-form-item__error {
        float: left;
        position: relative;
        line-height: 30px;
        margin-left: 10px;
    }

    /*提示框的字符颜色*/
    /deep/ .el-input__prefix, .el-input__suffix {
        color: #44cd3f;
        font-size: 18px;
    }

    /deep/ .el-input__icon {
        color: #44cd3f;
        font-size: 18px;
    }

    /*是否显示*/
    /deep/ .el-switch {
        line-height: 40px;
    }

    /*图片上传*/
    /deep/ [data-v-e7f6aa16] input[type=file] {
        display: block;
    }

    .upload-icon {
        margin-top: -50px;
        margin-bottom: 10px;
    }

    /*视频上传*/
    .articleVideo {
        width: 100%;
    }

    /*文件列表*/
    .upload-file-list {
        margin-bottom: 10px;
        margin-top: -40px;
    }

    /*每一行高度*/
    /deep/ .el-table td, .el-table th {
        padding: 0;
    }

    /*关键字*/
    .keyTags {
        float: left;
        margin-right: 8px;
    }

    .keyTagsInput {
        float: left;
    }

    .input-new-tag {
        max-width: 230px;
        float: left;
    }

    /*文件列表*/

    .upload-file-list {
        margin-bottom: 10px;
        margin-top: -40px;
        margin-left: 13%;
    }

    .upload-file-list .el-image {
        width: 150px;
        float: left;
        padding: 5px;
        border: 1px solid #cccccc;
        margin-right: 5px;
    }

    .upload-file-list .file-image .img-url {
        position: relative;
    }

    /*.upload-file-list .file-image .img-url:hover:after{
        position: absolute;
        content: "删除 X";
        width: 50px;
        height: 20px;
        bottom: 5px;
        right: 5px;
        background-color: #409EFF;
        color: white;
        !*点击*!
        pointer-events: auto;
    }*/
    .upload-file-list .file-image .img-after {
        position: relative;
        float: left;
        margin-top: 56px;
        margin-left: -37px;
        color: white;
    }

    .upload-file-list .file-image .img-after .img-del {
        padding: 5px;
        border-radius: 0;
        background-color: #e92322;
        border: 1px solid #ffffff;
    }

    .upload-file-list .file-image .img-after .img-del:hover {
        background-color: #f6504f;
    }

    /*首页显示*/
    .indexShow {
    }

    /*产品权限描述*/
    .privilegeInput {
        float: left;
        max-width: 250px;
        margin-right: 5px;
    }

    .privilegeBtn {
        float: left;
        max-width: 250px;
        border: 2px solid #DCDFE6;
        padding: 12px 24px;
    }

    /deep/ .el-input-group__prepend {
        background-color: #f6504f;
        color: #ffffff;
        border: 2px solid #DCDFE6;
    }

    .privilegeInput .privilegeInputTitle {

    }
    /*显示*/
    .el-switch{
        margin-top: 10px;
    }
    /*privilege-table权限表格*/
    .previous-row{
        margin-bottom: 20px;
    }
    .indexShow{
        float: left;
    }
    /*模态框*/
    .header-title {
        background: #2589e7;
        color: white;
        font-size: 20px;
    }

    /deep/ .el-dialog__header {
        padding: 0;
    }

    /deep/ .el-dialog--center .el-dialog__body {
        background: #d2d3d04d;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close {
        color: white;
        font-size: 24px;
    }

    /deep/ .el-form-item__label {
        text-align: center;
        padding: 0;
    }

    /deep/ .el-dialog__body {
        padding: 20px 10px;
    }

    /deep/ .el-form-item {
        margin-bottom: 5px;
    }

    .inputWidth {
        max-width: 500px;
        float: left;
    }

    .inputContent {

    }
</style>